<template>
	<view class="collection">
		<view class="flex-col container">
			<view class="flex-col group">
				<view class="flex-col group_1">
					<view class="flex-col section_2">
						<view class="justify-between group_2" style="align-items: center;">
							<text class="text_2">姓名</text>
							<input type="text" v-model="form.username" placeholder="请填写您的姓名" style="text-align: right;"/>
						</view>
						<view class="justify-between group_3">
							<text class="text_5">性别</text>
							<view class="flex-row group_4">
								<view class="flex-row group_6" @click="form.gender = 0">
									<view v-if="form.gender == 0" class="section_3"> </view>
									<view v-else class="section_4"> </view>
									<text class="text_6">男</text>
								</view>
								<view class="flex-row group_6" @click="form.gender = 1">
									<view v-if="form.gender == 1" class="section_3"> </view>
									<view v-else class="section_4"> </view>
									<text class="text_7">女</text>
								</view>
							</view>
						</view>
						<view class="flex-col group_7">
							<view class="justify-between group_8">
								<text class="text_8">出生年月</text>
								<view class="flex-row group_9" @click="visible1 = true">
									<text class="text_3">{{form.birthday}}</text>
									<image
										src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/618dbcd40163bf0011e4b5aa/618dbd170163bf0011e4b5de/16372218084776160131.png"
										class="icon_1 image" />
								</view>
							</view>
							<view class="justify-between group_10" style="align-items: center;">
								<text class="text_10">联系电话</text>
								<view class="flex-row group_11">
									<input type="text" v-model="form.mobile" maxlength="11" placeholder="请输入联系电话" style="text-align: right;"/>
									<image
										src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/618dbcd40163bf0011e4b5aa/618dbd170163bf0011e4b5de/16372218084776160131.png"
										class="icon_1 image_1" />
								</view>
							</view>
						</view>
					</view>
					<view class="flex-col section_5">
						<view class="justify-between group_12">
							<text class="text_12">预约时间</text>
							<view class="flex-row group_13" @click="visible2 = true">
								<text class="text_3">{{form.yuyue}}</text>
								<image
									src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/618dbcd40163bf0011e4b5aa/618dbd170163bf0011e4b5de/16372218084776160131.png"
									class="icon_1 image_2" />
							</view>
						</view>
						<text class="text_15">预约地址</text>
						<view class="justify-between group_14">
							<input type="text" v-model="form.address" placeholder="请输入详情地址"
								style="width: 100%;"
							 />
						</view>
					</view>
				</view>
				<view class="flex-col items-center button" @click="C_submit">
					<text class="text">提交并预约</text>
				</view>
			</view>
		</view>
		
		<w-picker :visible.sync="visible1" mode="date" :current="true" fields="day" @confirm="C_choosedate" @cancel="visible1 = false" :disabled-after="false" ref="date" ></w-picker>
		<w-picker :visible.sync="visible2" mode="date" :current="true" fields="minute" @confirm="C_choosedate2" @cancel="visible2 = false" :disabled-after="false" ref="date" ></w-picker>
		
	</view>
</template>

<script>
	import yz from '@/common/yz.js'
	export default {
		data() {
			return {
				visible1:false,
				visible2:false,
				
				form:{
					username:'',
					gender:0,
					birthday:'请选择出生年月',
					mobile:'',
					yuyue:'请选择预约时间',
					address:''
				}
			};
		},
		methods:{
			C_choosedate(val){
				this.form.birthday = val.value
			},
			C_choosedate2(val){
				console.log(val);
				this.form.yuyue = val.result
			},
			C_submit(){
				let {username,gender,birthday,mobile,yuyue,address} = this.form;
				
				if(!username){this.$u.toast('请输入您的姓名');return};
				if(birthday == '请选择出生年月'){this.$u.toast('请选择出生年月');return};
				if(!yz.isMobile(mobile)){this.$u.toast('请输入正确的手机号');return};
				if(yuyue == '请选择预约时间'){this.$u.toast('请选择预约时间');return};
				if(!address){this.$u.toast('请输入详情地址');return};
				
				this.$u.post('/appuser/add_collect',{
					user_name	:username,	//是	int	姓名
					gender,					//是	string	性别
					birthday,				//是	string	出生年月 :2022-01-17
					mobile,					//是	int	联系方式
					appoint_time:yuyue,		//是	int	预约时间:时间戳
					address,		//是	int	地址
				}).then(res=>{
					console.log(res);
					this.$u.toast(res.msg)
					if(res.code == 0){
						setTimeout(_=>{
							uni.navigateBack()
						},700)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	@import '@/common/style.scss';

	.container {
		text-transform: none;
		background-color: rgb(246, 246, 246);
		width: 100vw;
		height: 100vh;
		overflow-y: auto;

		.group {
			padding: 20rpx 22rpx 75rpx;
			flex: 1 1 auto;
			overflow-y: auto;

			.group_1 {
				.section_2 {
					padding: 45rpx 15rpx 0 27rpx;
					background-color: rgb(255, 255, 255);
					border-radius: 18rpx;

					.group_2 {
						padding-left: 8rpx;
						padding-bottom: 26rpx;
						color: rgb(34, 34, 34);
						font-size: 26rpx;
						line-height: 25rpx;
						white-space: nowrap;
						border-bottom: solid 2rpx rgb(232, 232, 232);

						.text_2 {
							margin-bottom: 3rpx;
						}

						.text_4 {
							margin-top: 3rpx;
						}
					}

					.group_3 {
						margin-top: 43rpx;
						padding-left: 7rpx;
						padding-bottom: 24rpx;
						border-bottom: solid 2rpx rgb(232, 232, 232);

						.text_5 {
							margin-bottom: 5rpx;
							color: rgb(34, 34, 34);
							font-size: 26rpx;
							line-height: 25rpx;
							white-space: nowrap;
						}

						.group_4 {
							margin-top: 3rpx;
							color: rgb(34, 34, 34);
							font-size: 24rpx;
							line-height: 22rpx;
							white-space: nowrap;

							.group_6 {
								margin-left: 38rpx;

								.section_4 {
									background-color: rgb(245, 245, 245);
									border-radius: 13rpx;
									width: 26rpx;
									height: 26rpx;
									border: solid 2rpx rgb(176, 176, 176);
								}

								.text_7 {
									margin-left: 12rpx;
								}
							}

							.section_3 {
								background-color: rgb(241, 241, 241);
								border-radius: 13rpx;
								width: 26rpx;
								height: 26rpx;
								border: solid 6.7rpx rgb(45, 102, 233);
							}

							.text_6 {
								margin-left: 16rpx;
								margin-top: 3rpx;
							}
						}
					}

					.group_7 {
						padding-top: 43rpx;

						.group_8 {
							padding: 0 9rpx 26rpx;
							color: rgb(34, 34, 34);
							font-size: 26rpx;
							line-height: 25rpx;
							white-space: nowrap;
							border-bottom: solid 2rpx rgb(232, 232, 232);

							.text_8 {
								margin-bottom: 3rpx;
							}

							.group_9 {
								margin-right: 3rpx;

								.image {
									margin-left: 5rpx;
								}
							}
						}

						.group_10 {
							padding: 36rpx 8rpx 26rpx;

							.text_10 {
								margin-bottom: 3rpx;
								color: rgb(34, 34, 34);
								font-size: 26rpx;
								line-height: 25rpx;
								white-space: nowrap;
							}

							.group_11 {
								margin-right: 4rpx;
								margin-top: 3rpx;
								color: rgb(34, 34, 34);
								font-size: 26rpx;
								line-height: 20rpx;
								white-space: nowrap;

								.text_11 {
									margin-bottom: 3rpx;
								}

								.image_1 {
									margin-left: 5rpx;
								}
							}
						}
					}
				}

				.section_5 {
					margin-top: 21rpx;
					padding: 0 27rpx 25rpx;
					background-color: rgb(255, 255, 255);
					border-radius: 18rpx;

					.group_12 {
						padding: 42rpx 0 25rpx 8rpx;
						border-bottom: solid 2rpx rgb(232, 232, 232);

						.text_12 {
							margin-bottom: 4rpx;
							color: rgb(34, 34, 34);
							font-size: 26rpx;
							line-height: 25rpx;
							white-space: nowrap;
						}

						.group_13 {
							margin-top: 4rpx;
							color: rgb(34, 34, 34);
							font-size: 26rpx;
							line-height: 22rpx;
							white-space: nowrap;

							.text_14 {
								margin-bottom: 3rpx;
							}

							.image_2 {
								margin-left: 3rpx;
							}
						}
					}

					.text_15 {
						margin-left: 8rpx;
						margin-top: 36rpx;
						color: rgb(34, 34, 34);
						font-size: 26rpx;
						line-height: 25rpx;
						white-space: nowrap;
					}

					.group_14 {
						margin-top: 31rpx;
						padding-left: 8rpx;
						color: rgb(34, 34, 34);
						font-size: 26rpx;
						line-height: 25rpx;
						white-space: nowrap;
					}
				}

				.text_3 {
					opacity: 0.7;
				}

				.icon_1 {
					width: 13rpx;
					height: 24rpx;
				}
			}

			.button {
				margin-top: 385rpx;
				padding: 25rpx 0 29rpx;
				align-self: center;
				color: rgb(254, 254, 255);
				font-size: 30rpx;
				font-weight: 700;
				line-height: 29rpx;
				letter-spacing: -1.2rpx;
				white-space: nowrap;
				background-color: rgb(17, 136, 236);
				background-image: linear-gradient(0deg, rgb(33, 89, 225) 0%, rgb(40, 152, 231) 100%);
				border-radius: 41rpx;
				width: 580rpx;

				.text {
					text-transform: uppercase;
				}
			}
		}
	}
</style>
